<template>
  <div class="app-wrapper" :class="theme">
    <!-- 混合布局头部 -->
    <header class="header">
      <div class="logo" v-if="!logoHidden">
        <img src="@/assets/vue.svg" alt="Logo" class="logo-img">
        <span class="logo-text">Admin Dashboard</span>
      </div>
      <div class="header-right">
        <el-tooltip content="菜单" placement="bottom">
          <el-button
            circle
            size="small"
            @click="toggleSidebar"
          >
            <template #icon><el-icon><Menu /></el-icon></template>
          </el-button>
        </el-tooltip>
        <el-tooltip content="主题切换" placement="bottom">
          <el-button
            circle
            size="small"
            @click="toggleTheme"
            v-if="theme === 'light'"
          >
            <template #icon><el-icon><View /></el-icon></template>
          </el-button>
          <el-button
            circle
            size="small"
            @click="toggleTheme"
            v-else
          >
            <template #icon><el-icon><Moon /></el-icon></template>
          </el-button>
        </el-tooltip>
        <el-tooltip content="布局切换" placement="bottom">
          <el-dropdown trigger="click">
            <el-button circle size="small">
              <template #icon><el-icon><Grid /></el-icon></template>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="switchLayout('vertical')">垂直布局</el-dropdown-item>
                <el-dropdown-item @click="switchLayout('horizontal')">水平布局</el-dropdown-item>
                <el-dropdown-item @click="switchLayout('hybrid')">混合布局</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-tooltip>
        <el-tooltip content="全屏" placement="bottom">
          <el-button
            circle
            size="small"
            @click="toggleFullscreen"
          >
            <template #icon><el-icon v-if="fullscreen"><Fold /></el-icon><el-icon v-else><Expand /></el-icon></template>
          </el-button>
        </el-tooltip>
        <el-tooltip content="隐藏Logo" placement="bottom">
          <el-button
            circle
            size="small"
            @click="toggleLogo"
          >
            <template #icon><el-icon v-if="logoHidden"><Picture /></el-icon><el-icon v-else><Delete /></el-icon></template>
          </el-button>
        </el-tooltip>
        <el-dropdown trigger="click" class="user-dropdown">
          <span class="user-info">
            <el-avatar :size="24" icon="User" />
            <span class="user-name" v-if="!isMobile">管理员</span>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>个人中心</el-dropdown-item>
              <el-dropdown-item>设置</el-dropdown-item>
              <el-dropdown-item>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </header>

    <div class="container">
      <!-- 侧边栏 -->
      <aside
        :class="['sidebar', { 'sidebar-hidden': sidebarHidden }]"
        :style="sidebarWidthStyle"
      >
        <el-menu
          :default-active="activeMenu"
          class="el-menu-vertical-demo"
          @select="handleMenuSelect"
        >
          <el-menu-item index="/dashboard">
            <template #icon><el-icon><HomeFilled /></el-icon></template>
            首页
          </el-menu-item>
          <el-sub-menu index="/acl">
            <template #title>
              <el-icon><Lock /></el-icon>
              <span>权限管理</span>
            </template>
            <el-menu-item index="/acl/user">用户管理</el-menu-item>
            <el-menu-item index="/acl/menu">菜单管理</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </aside>

      <!-- 主内容区域 -->
      <main class="main-content">
        <router-view />
      </main>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useLayoutStore } from '@/store/layout'
import {
  HomeFilled,
  Lock,
  User,
  Menu,
  View,
  Moon,
  Grid,
  Expand,
  Fold,
  Picture,
  Delete
} from '@element-plus/icons-vue'

const router = useRouter()
const route = useRoute()
const layoutStore = useLayoutStore()

// 响应式引用
const isCollapsed = ref(false)
const isMobile = ref(false)

// 计算属性
const logoHidden = computed(() => layoutStore.layoutSettings.logoHidden)
const theme = computed(() => layoutStore.layoutSettings.theme)
const fullscreen = computed(() => layoutStore.layoutSettings.fullscreen)
const sidebarWidth = computed(() => 240) // 使用固定值替代不存在的属性
const sidebarHidden = computed(() => layoutStore.layoutSettings.sidebarHidden)
const activeMenu = computed(() => route.path)
const sidebarWidthStyle = computed(() => {
  return { width: `${sidebarWidth.value}px` }
})

// 方法
const toggleSidebar = () => {
  layoutStore.toggleSidebar()
}

const toggleLogo = () => {
  layoutStore.toggleLogo()
}

const toggleTheme = () => {
  layoutStore.toggleTheme()
}

const toggleFullscreen = () => {
  layoutStore.toggleFullscreen()
}

const switchLayout = (type: 'vertical' | 'horizontal' | 'hybrid') => {
  layoutStore.toggleLayoutType(type)
}

const handleMenuSelect = (key: string) => {
  router.push(key)
}

// 初始化
onMounted(() => {
  // 检查主题
  if (theme.value === 'dark') {
    document.documentElement.classList.add('dark')
  }
  // 检查窗口大小
  const checkMobile = () => {
    isMobile.value = window.innerWidth < 768
  }
  checkMobile()
  window.addEventListener('resize', checkMobile)
})
</script>

<style scoped lang="scss">
// 基础样式
.app-wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f7fa;

  &.dark {
    background-color: #1a1a1a;
    color: #fff;
  }
}

// 头部样式
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 64px;
  padding: 0 20px;
  background-color: #fff;
  box-shadow: none;

  .logo {
    display: flex;
    align-items: center;

    .logo-img {
      height: 32px;
      margin-right: 10px;
    }

    .logo-text {
      font-size: 18px;
      font-weight: bold;
      color: #1890ff;
    }
  }

  .header-right {
    display: flex;
    align-items: center;
    margin-left: auto;

    .el-button {
      margin-left: 10px;
    }

    .user-dropdown {
      margin-left: 15px;

      .user-info {
        display: flex;
        align-items: center;
        cursor: pointer;

        .user-name {
          margin-left: 5px;
        }
      }
    }
  }
}

// 容器样式
.container {
  display: flex;
  flex: 1;
  overflow: hidden;
}

// 侧边栏样式
.sidebar {
  background-color: #fff;
  box-shadow: 1px 0 4px rgba(0, 0, 0, 0.1);
  transition: width 0.2s;
  overflow: hidden;

  .el-menu-vertical-demo {
    height: 100%;
    border-right: none;
  }

  &.sidebar-hidden {
    width: 0 !important;
    overflow: hidden;
  }
}

// 主内容区域样式
.main-content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  min-height: calc(100vh - 64px);
}

// 暗色模式适配
.dark {
  .header {
    background-color: #2c2c2c;
    color: #fff;
  }

  .sidebar {
    background-color: #2c2c2c;
    color: #fff;
  }

  .el-menu {
    background-color: #2c2c2c;
    color: #fff;

    .el-menu-item,
    .el-sub-menu__title {
      color: #ccc;

      &:hover {
        background-color: #3a3a3a;
      }

      &.is-active {
        background-color: #1890ff;
        color: #fff;
      }
    }
  }
}

// 响应式适配
@media screen and (max-width: 768px) {
  .sidebar {
    position: fixed;
    z-index: 1000;
    height: calc(100vh - 64px);
    top: 64px;
    left: 0;
  }

  .main-content {
    padding: 10px;
  }
}
</style>